<template>
  <k-view class="top-banner" :style="{ backgroundColor: color, backgroundImage: tbBackgroundImg }">
    <k-view
      :class="[
        'decoration',
        titleTip ? 'bottom-decoration' : 'nobottom-decoration',
        isPremium ? 'premium' : '',
      ]"
      :style="{ backgroundImage: decorationBgImg }"
    ></k-view>
    <k-text v-if="[1, 2].includes(authType)" class="statement" @click="jumpStatement"
      >权益说明</k-text
    >
    <template v-if="isPremium">
      <k-image
        src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/4b98a61b-c2ca-45d1-92b2-76c2fa55b830.png"
        class="left ear"
      ></k-image>
      <k-image
        src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/99ca8802-2160-485d-a29d-3e5eef5b9c85.png"
        class="right ear"
      ></k-image>
    </template>
    <k-view class="title-tip-view" v-if="titleTip">
      <k-text class="title-tip" :style="{ color: color }">{{ titleTip }}</k-text>
    </k-view>
    <k-image
      v-if="title === '上市公司健康指数'"
      class="title-logo-index"
      :src="dealTitle"
    ></k-image>
    <k-image
      v-else-if="title === '健康指数排行榜'"
      class="title-logo-rank"
      src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/d89a5524-dc08-47fe-b602-58d20f9fede1.png"
    ></k-image>
    <k-text v-if="title === '健康指数排行榜'" class="sub-title">{{ subTitle }}</k-text>
    <k-text
      @click="goIntro"
      v-else
      :class="`sub-title link-title ${isPremium ? 'premium' : ''}`"
      :style="{ backgroundImage: linkTitleImg }"
      >{{ linkTitle }}</k-text
    >
  </k-view>
</template>

<script>
import { PAGEID } from '@/config/stat';
import { jumpByUrl } from '@/utils';
import { sendClickStat } from '@/utils/stat';
import fl from '@king-fisher/falcon';
import config from '@/config/index';

export default {
  props: {
    title: {
      type: String,
      default: '上市公司健康指数',
    },
    subTitle: {
      type: String,
      default: '创利塑造价值 健康引领未来',
    },
    titleTip: {
      type: String,
      default: '',
    },
    linkTitle: {
      type: String,
      default: '创利塑造价值 健康引领未来',
    },
    authType: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    isPremium() {
      return this.authType === 2;
    },
  },
  data() {
    return {
      color: '',
      dealTitle: '',
      tbBackgroundImg: '',
      decorationBgImg: '',
      linkTitleImg: '',
      onceClick: true,
    };
  },
  methods: {
    goIntro() {
      sendClickStat(`${PAGEID.INDEX}.intro.click`);
      jumpByUrl({ name: 'intro', query: { id: 'nervous_score' } });
    },
    jumpStatement() {
      sendClickStat(`${PAGEID.INDEX}.vip.click.${this.authType}`);
      fl.jumpNativePage({
        url: `client.html?action=ymtz^webid=2804^mode=new^url=${config.url.homeLoadPage}`,
      });
      if (this.onceClick) {
        this.$emit('jumpStatement');
        this.onceClick = false;
      }
    },
  },
  watch: {
    authType: {
      handler() {
        const premiumArr = [
          '',
          '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/751a8b4a-c53a-47b5-9f6e-b64a9fc372e2.png',
          '',
          '',
          'url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/de7c850d-9a07-47cd-b024-a6047c4a5d90.png)',
        ];
        const basicArr = [
          '#ff2436',
          '//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/8b5f0103-ad6b-4d3e-94e7-609bbc6d8e9d.png',
          'url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/5ffe3cef-f4f7-46c2-96ed-8e393166c439.png)',
          'url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/f7ba602b-3235-4329-b657-dbe4aa2d37e5.png)',
          'url(//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/716d3fee-ec1f-4cb9-a72e-6ae6bf74cc49.png)',
        ];
        [
          this.color,
          this.dealTitle,
          this.tbBackgroundImg,
          this.decorationBgImg,
          this.linkTitleImg,
        ] = this.isPremium ? premiumArr : basicArr;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less">
.top-banner {
  width: 100%;
  padding-top: 88px;
  padding-bottom: 36px;
  box-sizing: border-box;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  .statement {
    position: absolute;
    top: 22px;
    right: 32px;
    font-family: PingFangSC-Regular;
    font-size: 32px;
    color: #ffffff;
    text-align: right;
    font-weight: 400;
    z-index: 101;
  }

  .ear {
    position: absolute;
    width: 190px;
    height: 190px;
    top: 50px;
  }

  .left {
    left: 4px;
  }

  .right {
    right: 4px;
  }

  .decoration {
    width: calc(100vw - 84px);
    height: 254px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 100;
  }

  .bottom-decoration {
    background-position-y: -30px;
  }

  .nobottom-decoration {
    background-position-y: 54px;
  }

  .title-tip-view {
    width: 280px;
    height: 56px;
    background-image: url(../../assets/index/industry_bg.png);
    background-size: 280px 56px;
    background-repeat: no-repeat;
    margin-bottom: 16px;
  }

  .title-tip {
    font-size: 32px;
    text-align: center;
    font-weight: 500;
    line-height: 58px;
  }

  .title {
    font-size: 48px;
    color: #ffffff;
  }

  .title-logo-index {
    width: 570px;
    height: 108px;
    z-index: 200;
  }

  .title-logo-rank {
    width: 574px;
    height: 108px;
  }

  .sub-title {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;

    &.premium {
      color: rgba(55, 45, 32, 0.7);
    }
  }

  .link-title {
    padding-right: 24px;
    background-repeat: no-repeat;
    background-size: 12px 20px;
    background-position: right 6px;
    z-index: 200;
    letter-spacing: 6px;
  }
}
</style>
